import {Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {AppComponent} from "../../../app.component";
import {AppService} from "../../../app.service";
import {GlobalEvent} from "../../../support/event.definition";

@Component({
  selector: 'ss-platform-tip',
  styleUrls: ["tip.component.scss"],
  templateUrl: `tip.component.html`,
  host: {class: "ss-platform-tip-wraper"},
  encapsulation: ViewEncapsulation.None
})
export class TipComponent {

  @ViewChild("tip")
  tipElementRef: ElementRef;
  isDisplay: boolean = false;
  message: string;
  rect = {top: 0, left: 0};

  constructor(private elementRef: ElementRef, private $app: AppService) {
    $app.subscribe([GlobalEvent.ShowTip, GlobalEvent.HideTip], (eventName, message, element: HTMLElement) => {
      // Show
      if (eventName == GlobalEvent.ShowTip) {
        this.isDisplay = true;
        this.message = message;
        let rect = element.getBoundingClientRect();
        setTimeout(() => {
          try {
            let tipWidth = this.tipElementRef.nativeElement.scrollWidth;
            this.rect.left = rect.x + (rect.width / 2) - (tipWidth / 2);
            this.rect.top = rect.y - 34;
          } catch (ex) {
          }
        })
      }
      // Hide
      else {
        this.isDisplay = false;
      }
    })
  }

}
